/*MAIN---------------------------*/

*{
	color:white;
	margin: 0px;
	padding: 0px;
	font-family: sans-serif;
	font-weight: bold;
}

html,body{
	overflow:hidden;
	height: 100%;
}

body{
    background: -webkit-gradient(linear, 0 0, 100% 0, from(#0e1b20), to(#23363c));
    background: -webkit-linear-gradient( #23363c, #0e1b20, #23363c);
    background: -moz-linear-gradient( #23363c, #0e1b20, #23363c);
    background: -o-linear-gradient( #23363c, #0e1b20, #23363c);
    background: linear-gradient( #23363c, #0e1b20, #23363c);
}

@font-face{
	font-family: boston;
	src: url(../css/boston_traffic.ttf);
}

section{
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#43494b), to(#2e3335));
    background: -webkit-linear-gradient(#43494b, #2e3335);
    background: -moz-linear-gradient(#43494b, #2e3335);
    background: -o-linear-gradient(#43494b, #2e3335);
    background: linear-gradient(#43494b, #2e3335);
    width: 960px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

#gameScreen{
	position: relative;
	margin-top:0%;
	height: 700px;
	width: 960px;
	background: #4fbee7;
    overflow: hidden;
}

/*GAME-----------------*/

#effectScreen{
    top:0px;
    z-index: 50;
    position: absolute;
    height: 700px;
    width: 960px;
    background: black;
    opacity: 0;
    -webkit-animation: effectsScreenAnimation 1.5s;
}

/*Planes*/

#playerPlaneDiv {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1000;
}

.sentryPlaneDiv {
    position: absolute;
    left: 0;
    bottom: 0;
}

.enemyPlane {
    position: absolute;
    left: 0;
    bottom: 0;
}

.playerBulletDiv {
    border-radius: 2px 2px 0px 0px;
    position: absolute;
    height: 15px;
    width: 4px;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffcb00), to(#ff7100));
    background: -webkit-linear-gradient(#ffcb00, #ff7100);
    background: -moz-linear-gradient(#ffcb00, #ff7100);
    background: -o-linear-gradient(#ffcb00, #ff7100);
    background: linear-gradient(#ffcb00, rgba(255,113,0,0.5));
}

.deathRayDiv {
    border-bottom-left-radius: 25px 50px;
    border-bottom-right-radius: 25px 50px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    background: -webkit-gradient(linear, 100% 0, 0 0, from(rgba(86,181,255,0)), color-stop(0.1, rgba(86,181,255,1)), color-stop(0.2, white), color-stop(0.8, white), color-stop(0.9, rgba(86,181,255,1)), to(rgba(86,181,255,0)));
    background: -webkit-linear-gradient(to right, rgba(86,181,255,0) 0%, rgba(86,181,255,1) 10%, white 20%, white 80%, rgba(86,181,255,1) 90%, rgba(86,181,255,0) 100%);
    background: -moz-linear-gradient(to right, rgba(86,181,255,0) 0%, rgba(86,181,255,1) 10%, white 20%, white 80%, rgba(86,181,255,1) 90%, rgba(86,181,255,0) 100%);
    background: -o-linear-gradient(to right, rgba(86,181,255,0) 0%, rgba(86,181,255,1) 10%, white 20%, white 80%, rgba(86,181,255,1) 90%, rgba(86,181,255,0) 100%);
    background: linear-gradient(to right, rgba(86,181,255,0) 0%, rgba(86,181,255,1) 10%, white 20%, white 80%, rgba(86,181,255,1) 90%, rgba(86,181,255,0) 100%);
    
}

.enemyBulletDiv {
    border-radius:  0px 0px 2px 2px;
    position: absolute;
    height: 15px;
    width: 4px;
  	background: -webkit-gradient(linear, 0 0, 0 100%, from(#df3100), to(#ff7100));
    background: -webkit-linear-gradient(#df3100, #ff7100);
    background: -moz-linear-gradient(#df3100, #ff7100);
    background: -o-linear-gradient(#df3100, #ff7100);
    background: linear-gradient(#df3100, #ff7100);
}

.bossBulletDiv {
    border-radius:  0px 0px 4px 4px;
    position: absolute;
    height: 30px;
    width: 6px;
  	background: -webkit-gradient(linear, 0 0, 0 100%, from(#df3100), to(#ff7100));
    background: -webkit-linear-gradient(#df3100, #ff7100);
    background: -moz-linear-gradient(#df3100, #ff7100);
    background: -o-linear-gradient(#df3100, #ff7100);
    background: linear-gradient(#df3100, #ff7100);
}

.piercingBulletDiv {
    border-radius: 2px 2px 0px 0px;
    position: absolute;
    height: 15px;
    width: 4px;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#78f1ff), to(#277aea));
    background: -webkit-linear-gradient(#78f1ff, #277aea);
    background: -moz-linear-gradient(#78f1ff, #277aea);
    background: -o-linear-gradient(#78f1ff, #277aea);
    background: linear-gradient(#78f1ff, #277aea);
}

.homingBulletDiv{
    position: absolute;
    height:15px;
    width:4px;
    border-radius: 2px 2px 0px 0px;
    background: linear-gradient(#e5ff51,#4e5142);
}

.blackHole{
    position: absolute;
    height: 400px;
    width:400px;
    border-radius: 200px;
    -webkit-animation : blackHoleAnimation 0.5s ease-out;
}

.stormCloudDiv {
    position: absolute;
    height: 80px;
    width: 80px;
    z-index: 1;
    background-image: url(../images/planes/stormCloudFrames.png);
    -webkit-animation: stormCloudAnimation 0.3s infinite

}

.hpBarEnemy {
    position: absolute;
    width: 100%;
    height: 5px;
    border:2px solid black;
    background-color: #d22d13;
    opacity: 0.8;
}

.hpBarFriendly {
    position: absolute;
    width: 100%;
    height: 5px;
    border:2px solid black;
    background-color: #45cb36;
    opacity: 0.8;
}

@-webkit-keyframes enemyDeathAnimation {
	from  {opacity: 1; -webkit-transform: scale(1, 1) rotateY(0deg)}
	to {opacity: 0.05; -webkit-transform: scale(0.01, 0.01) rotateY(240deg)}
}

@-webkit-keyframes effectsScreenAnimation {
	from  {opacity: 0; }
	to {opacity: 1; }
}

@-webkit-keyframes stormCloudAnimation{
                0%{background-position: 0px 0px}
                24.9%{background-position: 0px 0px}
                25%{background-position: 80px 0px}
                49.9%{background-position: 80px 0px}
                50%{background-position: 160px 0px}
                74.9%{background-position: 160px 0px}
                75%{background-position: 240px 0px}
                99.9%{background-position: 240px 0px}
                100%{background-position: 0px 0px}
            }

@-webkit-keyframes blackHoleAnimation{
            0%{
                background: #795a98;
                -webkit-transform: scale(1);
                opacity: 0.2;
            }
            100%{
                background: #342740;
                -webkit-transform: scale(0);
                opacity: 0.8;
            }
        }